<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="layouts/default">
<!-- title -->
<th:block layout:fragment="title">
    长期调配
</th:block>

<!-- head -->
<th:block layout:fragment="head">
    <link rel="stylesheet" th:href="@{/js/plugins/fixedheadertable/defaultTheme.css}">
    <link rel="stylesheet" href="/css/element-ui2.3.3.css">
    <!--页面自定义样式-->
    <style>
        #mainTable .el-input {
            position: static;
        }
    </style>
</th:block>
<!-- content -->
<th:block layout:fragment="content">

    <div id="app" class="content" v-loading="loading" v-cloak>
        <h1 class="title">长期调配</h1>

        <span>车型：</span>
        <el-radio-group v-model="currSpuCode" @change="queryAllotLongList">
            <template v-for="item of spuList">
                <el-radio-button :label="item.spuCode">{{item.spuName}}</el-radio-button>
            </template>
        </el-radio-group>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <span>年度：</span>
        <el-radio-group v-model="currYear" @change="queryAllotLongList">
            <template v-for="item of yearList">
                <el-radio-button :label="item.year"></el-radio-button>
            </template>
        </el-radio-group>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="savePreYield" style="padding: 15px;" type="primary">保存</el-button>
        <el-row>
            <el-button  size="small" type="primary" icon="el-icon-download" @click="onDownloadExcel" >下载模板</el-button>
            <el-button  size="small" type="success" icon="el-icon-upload" @click="onUploadExcel" >导入数据</el-button>
        </el-row>
        </br></br>


        <!--由于有合并单元格，所以没法用element的ui-->
        <!--<div class="el-table el-table&#45;&#45;fit el-table&#45;&#45;border">-->
            <!--<div class="el-table__body-wrapper">-->

            <!--</div>-->
        <!--</div>-->

        <div style="overflow: hidden;">
            <table id="mainTable" cellspacing="0" cellpadding="0" border="0" class="fancyTable">
                <thead>
                <tr>
                    <th colspan="1" rowspan="1" class="is-center" style="width:120px">
                        <div class="cell">类别</div>
                    </th>
                    <th colspan="1" rowspan="1" class="is-center" style="width:120px">
                        <div class="cell">VDC</div>
                    </th>
                    <th colspan="1" rowspan="1" class="is-center" style="width:120px">
                        <div class="cell">全年</div>
                    </th>
                    <th v-for="n in weekCount" class="is-center" style="width: 120px">
                        <div class="cell">第{{n}}周</div>
                    </th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="(item, index) of yield">
                    <td :rowspan="yield.length" v-show="index==0" class="is-center">
                        <div class="cell">产量</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.vdcName}}</div>
                    </td>
                    <td class="is-center">
                        <span>
                            <div class="cell">{{item.yearCount+preYield[index].yearCount}}</div>
                        </span>
                    </td>

                    <td v-for="n in weekCount" class="is-center">
                        <span>
                            <div class="cell">{{item['wk'+n]}}</div>
                        </span>
                    </td>
                </tr>

                <tr v-for="(item,index) of sale">
                    <td :rowspan="sale.length" v-show="index==0" class="is-center">
                        <div class="cell">销量</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.vdcName}}</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.yearCount}}</div>
                    </td>


                    <td v-for="n in weekCount" class="is-center">
                        <div class="cell">{{item['wk'+n]}}</div>
                    </td>
                </tr>
                <tr v-for="(item,index0) of weekendStock">
                    <td :rowspan="weekendStock.length" v-show="index0==0" class="is-center">
                        <div class="cell">周末库存</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.vdcName}}</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.yearCount}}</div>
                    </td>


                    <td v-for="n in weekCount" class="is-center">
                        <div class="cell">{{item['wk'+n]}}</div>
                    </td>
                </tr>
                <tr v-for="(item,index) of weekendStock">
                    <td :rowspan="weekendStock.length" v-show="index==0" class="is-center">
                        <div class="cell">库存系数</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{item.vdcName}}</div>
                    </td>
                    <td class="is-center">
                        <div class="cell">{{weekendStockRatio(index, 'yearCount')}}</div>
                    </td>


                    <td v-for="n in weekCount" class="is-center">
                        <div class="cell">{{weekendStockRatio(index, 'wk'+n)}}</div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>

    </div>
</th:block>
<!-- js -->
<th:block layout:fragment="js">
    <!--页面js-->
    <script src="/js/vue.js"></script>
    <script src="/js/element-ui2.3.3.js"></script>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script th:src="@{/js/plugins/fixedheadertable/jquery.fixedheadertable.min.js}"></script>
    <script th:src="@{/js/allot//allotlongterm.js}"></script>
</th:block>
</html>